<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <meta http-equiv="pragma" content="no-cache" /> 
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /> 
  <meta http-equiv="expires" content="0" /> 
  <script type="text/javascript" src="lib/js/jquery-1.12.2.min.js"></script> 
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
  <link rel="stylesheet" href="lib/css/common.css" /> 
  <title>nginx小案例</title> 
 </head> 
 <body> 

         <div class="container" style="padding-top:100px">
            <div class="row clearfix">
                <div class="col-md-1 column">
                <span class="input-group-addon">姓名</span>
                </div>
                <div class="col-md-4 column"> 
                    <select class="selectpicker show-tick form-control " data-live-search="false" id="nameselect"> 
                    </select> 
                </div> 
                 <div>
                    <button type="button" class="btn btn-default btn-info" id="submit">行为</button>
                 </div> 
            </div>
        </div>


 </body>

 <script type="text/javascript">
  $(document).ready(function() {
    $.ajax({
        url: '/nginxjava/getname.do',
        type: 'GET',
        async: true,
        dataType: 'json',
        success: function(data) {
          if(data){
              $.each(data,function(key, item) {
                $("#nameselect").append("<option value=" + key + ">" + item + "</option>");
              });
          }
        },
    });


    $("#submit").click(function() {
      var name = $("#nameselect").val();
        $.ajax({
            url: '/nginxjava/lookAction.do',
            type: 'post',
            async: true,
            data:{"name":name},
            dataType: 'json',
            contentType: "application/json",
            success: function(data) {
                if (data) {
                    name = $("#nameselect option[value='"+name+"']").text();
                    alert(name+"的行为："+data.result);
                }
            },
            error: function() {
                alert("后台异常");
            },
        })
    });

  });

 </script>
</html>